<template>
  <div class="search-detail">
    <ul>
      <li :key="index" class="content" v-for="(filter,index) in filterData">
        <label class="left_title" for>{{filter.title}}:</label>
        <template v-if="filter.field_type === 'input'">
          <Input
            class="search-input"
            clearable
            v-model="filterModel[filter.field_name]"
            :placeholder="'输入'+filter.title+'查询'"
          />
        </template>

        <template v-if="filter.field_type === 'datarange'">
          <DatePicker
            v-model="filterModel.stime"
            format="yyyy-MM-dd HH:mm"
            type="datetime"
            placement="bottom-end"
            placeholder="开始时间"
            class="search-datetime"
          ></DatePicker>--
          <DatePicker
            v-model="filterModel.etime"
            format="yyyy-MM-dd HH:mm"
            type="datetime"
            placement="bottom-end"
            placeholder="结束时间"
            class="search-datetime"
          ></DatePicker>
        </template>

        <template v-if="filter.field_type === 'select'">
          <Select v-model="filterModel[filter.field_name]" class="search-select">
            <Option
              v-for="item in filter.options"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
import "./index.less";

export default {
  name: "TableFilters",
  data() {
    return {
      filterModel: {}
    };
  },
  props: {
    /**
     * @description 检索条件数组
     */
    filterData: {
      type: Array,
      default() {
        return [];
      }
    },
    /**
     * @description 双向绑定数据
     */
    value: {
      type: Object
    }
  },
  methods: {},
  mounted() {
    if (this.value) {
      this.filterModel = this.value;
    }
  },
  watch: {
    value(val) {
      this.filterModel = val;
    },
    filterModel(val) {
      this.$emit("input", val);
    }
  }
};
</script>
